<!--
 * @Description: 
 * @Date: 2022-06-30 10:17:53
 * @LastEditTime: 2023-05-24 17:57:17
 * @FilePath: \vue3\src\views\vue3Study\toTest.vue
-->
<template>
  <div class="div-column wraps">
    oldValue：{{ oldValue }} newValue:{{ newValue }}
    <button @click="changetoRef()">改变changetoRef</button>
    oldValue：{{ oldRef }} --newValue:{{ lName }}{{ lage }} --toRowValue:{{
      toRowValue
    }}
    <button @click="changetoRefs()">改变changetoRefs</button>
    <button @click="changetoRow()">改变toRow</button>

    <div>{{ `data1:${data1.name}` }}</div>
    <div>{{ `data2:${data2}` }}</div>
    <button @click="changeData1()">改变data1</button>
    <button @click="changeData2()">改变data2</button>
    <div>{{ `data3:${data3.name}` }}</div>
    <div>{{ `data4:${data4}` }}</div>
    <button @click="changeData3()">改变data3</button>
    <button @click="changeData4()">改变data4</button>
    <div>{{ `data5:${data5.name}` }}</div>
    <div>{{ `data6:${data6.name.value}` }}</div>
    <button @click="changeData5()">改变data5</button>
    <button @click="changeData6()">改变data6</button>
  </div>
</template>
<script>
import {
  ref,
  shallowReactive,
  shallowRef,
  triggerRef,
  customRef,
  reactive,
  readonly,
  toRef,
  toRefs,
  toRaw,
} from "vue";
export default {
  setup() {
    /**ref toRef toRefs区别 */
    //ref
    let data1 = {
      name: "孙悟空",
      age: 19,
    };
    let data2 = ref(data1.name);
    function changeData1() {
      data1.name = "章金莱";
      console.log(data1, data2);
    }
    function changeData2() {
      data2.value = "章金莱";
      console.log(data1, data2);
    }
    //toRef
    // let data3 = {
    //   name: "孙悟空",
    //   age: 19,
    // };
    //     let data3 = reactive({
    //   name: "孙悟空",
    //   age: 19,
    // });
    let data3 = ref({
      name: "孙悟空",
      age: 19,
    });
    let data4 = toRef(data3, "name");
    function changeData3() {
      data3.name = "章金莱";
      console.log(data3, data4.value);
    }
    function changeData4() {
      data4.value = "章金莱";
      console.log(data3, data4.value);
    }
    //toRefs
    // let data5 = {
    //   name: "孙悟空",
    //   age: 19,
    // };
    let data5 = reactive({
      name: "孙悟空",
      age: 19,
    });
    let data6 = toRefs(data5);
     console.log(data6.name.value, data6.age.value);
    function changeData5() {
      data5.name = "章金莱";
      console.log(data5, data6.name.value);
    }
    function changeData6() {
      data6.name.value = "章金莱";
      console.log(data5, data6.name.value);
    }

    //改变Reactive
    let oldValue = {
      name: "乌瑟尔",
      age: 18,
    };
    let newValue = toRef(oldValue, "age");
    function changetoRef() {
      newValue.value = 14;
      console.log("oldValue:" + JSON.stringify(oldValue));
      console.log("newValue:" + JSON.stringify(newValue));
    }

    let oldRef = reactive({
      name: "罗大佑",
      age: 65,
    });
    let { name: lName, age: lage } = toRefs(oldRef);
    let changetoRefs = () => {
      oldRef.age = 14;
      console.log(oldRef);
      console.log(lName.value, lage.value);
    };
    let toRowValue = toRaw(oldRef);
    let changetoRow = () => {
      toRowValue.age = 49;
      toRowValue.name = "李宗盛";
      console.log(oldRef);
      console.log(toRowValue);
    };
    return {
      oldValue,
      newValue,
      changetoRef,
      changetoRefs,
      oldRef,
      lName,
      lage,
      changetoRow,
      toRowValue,
      data1,
      data2,
      data3,
      data4,
      data5,
      data6,
      changeData1,
      changeData2,
      changeData3,
      changeData4,
      changeData5,
      changeData6,
    };
  },
};
</script>
<style>
html,
body {
  background: #ccc;
  height: 100vh;
}

.wraps {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
